<!-- 排班管理 -->
<template>
  <div class="dashboard-container transport-task customer-list-box">
    <!-- 搜索部分 -->
    <div
      class="search-container"
    >
      <div class="search-label">员工账号：</div>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="search-main"
      ></el-input>
      <div class="search-label">员工姓名：</div>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="search-main"
      ></el-input>
      <div class="search-label">工作模式：</div>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="search-main"
      ></el-input>
      <div class="search-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月份：</div>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="search-main"
      ></el-input>
      <div class="search-label">所属机构：</div>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="search-main"
      ></el-input>

      <el-button class="clo">提交</el-button>
      <el-button>重置</el-button>
    </div>
    <!-- 表格部分 -->
    <div class="table">
      <el-table
        :data="tableData"

        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="date"
          label="员工账号"
          width="150"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="name"
          label="员工姓名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="province"
          label="员工电话"
          width="120"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="city"
          label="员工角色"
          width="120"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="address"
          label="当前工作模式"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="1"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="2"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="3"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="4"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="5"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="6"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="7"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="8"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="9"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="10"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="11"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="12"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="13"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="14"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="15"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="16"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="17"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="18"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="19"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="20"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="21"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="22"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="23"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="24"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="25"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="26"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="27"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="28"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="29"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="30"
          width="100"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {

  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep  th.date{
  .cell{
    padding-left: 17px!important;
  }
}
.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.history-name {
  width: auto !important;
  ::v-deep  .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
  ::v-deep  .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
  ::v-deep  .el-dialog__footer {
    padding-bottom: 40px;
  }
}

.work-type {
  ::v-deep  .el-form-item__content {
    margin-left: 40px !important;
  }
  ::v-deep  .el-radio:first-child {
    margin-right: 80px !important;
  }
  ::v-deep .el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task ::v-deep  .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
::v-deep  .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep  .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
::v-deep  .el-card{
  overflow: initial;
}
.search-container{
  height: 150px;
  display: flex;
  align-items: center;
  flex-wrap:wrap;
  background-color: #fff;
  padding: 20px;
  margin: 20px;
  .search-main {
    width: 300px;
    margin-right: 30px;
    // margin-top: 10px;
  }
  .clo{
    background-color: #e15536;
    color: #fff;
  }

}
.table{
    margin: 20px;
    // width: 500px;
  }
</style>

<style></style>
